<template>
  <div class="bottom-box">
    <div class="footer">
      <div class="footer-box">
        <div class="footer-left">
          <div class="logo">
            <img src="@/assets/images/logo_white.png" alt="" srcset="" />
          </div>
          <div class="wechat">
            <img :src="contactData.wx_code" alt="" srcset="" />
            <p>关注官方微信公众号</p>
          </div>
        </div>
        <div class="footer-centet">
          <h1>组织机构</h1>
          <p><span>主办单位：</span>中国电子信息产业发展研究院</p>
          <p><span></span>湖南省工业和信息化厅</p>
          <p><span></span>株洲市人民政府</p>
          <p><span>执行单位：</span>株洲市工业和信息化局</p>
          <p><span></span>株洲国家高新技术产业开发区</p>
          <p><span></span>中国信息化周报</p>
          <p><span></span>中国软件园区发展联盟</p>
          <p><span></span>华为云计算技术有限公司</p>
        </div>
        <div class="footer-right">
          <h1>联系我们</h1>
          <p><span>地址：</span>{{ contactData.address }}</p>
          <p><span>邮编：</span>{{ contactData.zip_code }}</p>
          <p><span>电话：</span>{{ contactData.phone }}</p>
          <p><span>邮箱：</span>{{ contactData.email }}</p>
          <p><span>官方QQ群：</span>{{ contactData.qq_group }}</p>
        </div>
      </div>
    </div>
    <div class="bottom-beian">
      <p>
        <a target="_blank" href="https://beian.miit.gov.cn">京ICP备16006243号-20</a>&nbsp; &nbsp; &nbsp; &nbsp;<a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802028014">京公网安备11010802028014号</a>
      </p>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters,
    mapActions
  } from "vuex";

  export default {
    mounted() {
      this.getContactData();
    },
    methods: {
      ...mapActions(["getContactData"]),
    },
    computed: {
      ...mapGetters(["contactData"]),
    },
  };
</script>

<style scoped>
  .footer {
    background: url("../assets/images/index/bottom_bg.png") no-repeat center;
    padding: 70px 0 60px;
  }

  .footer-box {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .footer-left .wechat {
    margin-left: 50px;
    margin-top: 10px;
  }

  .footer-left .wechat img {
    width: 126px;
  }

  .footer-left .wechat p {
    color: #e9e9e9;
    font-size: 14px;
    margin-top: 5px;
  }

  .footer-box h1 {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .footer-box p {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
    line-height: 26px;
  }

  .footer-box .phone {
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
  }

  .footer-centet p span {
    display: inline-block;
    width: 70px;
  }

  .bottom-beian {
    padding: 10px 0;
    width: 100%;
    text-align: center;
    background: #0d0d0e;
  }

  .bottom-beian a {
    font-size: 14px;
    color: #999;
  }

  .bottom-beian a:hover {
    color: #fff;
  }
</style>